<template>
  <div class="incomesdetial">
    <div>
      <div class="summaryheader">
        <div class="shareheader_top">
          <!-- <div style="min-width: 260px; margin: 5px 10px 18px 0px">
            <span style="font-size: 13px; padding: 0px 8px 0px 0px">订单号:</span>
            <el-input v-model="orderSearch.order_no" placeholder="请输入订单号" style="width: 200px; padding: 0px 8px 0px 0px"></el-input>
          </div> -->
          <div style="min-width: 260px; margin: 5px 10px 18px 0px">
            <span style="font-size: 13px; padding: 0px 8px 0px 0px"
              >客户名称:</span
            >
            <el-select
              v-model="orderSearch.customer_id"
              filterable
              placeholder="请选择所属客户"
              style="width: 200px; padding: 0px 8px 0px 0px"
            >
              <el-option
                v-for="(item, index) in customerBoxData"
                :key="index"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </div>
          <div style="min-width: 260px; margin: 5px 10px 18px 0px">
            <span style="font-size: 13px; padding: 0px 8px 0px 0px"
              >创建订单时间:</span
            >
            <el-date-picker
              v-model="datepicker"
              type="daterange"
              :default-time="['00:00:00', '23:59:59']"
              range-separator="至"
              value-format="timestamp"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            >
            </el-date-picker>
          </div>

          <div style="min-width: 260px; margin: 5px 10px 18px 0px">
            <span style="font-size: 13px; padding: 0px 8px 0px 0px"
              >运单号:</span
            >
            <el-input
              v-model="orderSearch.waybill_no"
              placeholder="请输入运单号"
              style="width: 200px; padding: 0px 8px 0px 0px"
            ></el-input>
          </div>
          <div style="min-width: 100px; margin: 5px 10px 18px 0px">
            <el-button type="primary" icon="el-icon-search" @click="onSubmit()"
              >查询</el-button
            >
            <el-button
              type="primary"
              plain
              class="improtOut"
              icon="el-icon-search"
              @click="replacement()"
              >重置</el-button
            >
            <el-button
              plain
              icon="el-icon-d-arrow-left"
              @click="changeCustomerDetailPage()"
              >返回收入成本汇总</el-button
            >
          </div>
        </div>
      </div>
      <div
        class="sharecontent_headr"
        style="margin-bottom: 10px; overflow: hidden; height: 30px"
      >
        <el-button
          v-permission="'report_form_revenue_cost_summary_export'"
          type="primary"
          plain
          class="improtOut"
          :loading="loadingtype"
          @click="ExportClickPlayFn"
        >
          导出
        </el-button>
      </div>
      <div>
        <el-table
          :data="tableData"
          style="width: 100%"
          border
          sum-text="汇总"
          um-text="汇总"
          show-summary
          :summary-method="getSummaries"
        >
          <el-table-column prop="waybill_no" label="运单号" width="120">
            <template slot-scope="scope">
              <div
                style="cursor: pointer; color: blue"
                @click="handleJump(scope.row)"
              >
                {{ scope.row.waybill_no }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="创建运单时间" width="140">
          </el-table-column>
          <!-- <el-table-column prop="from_network_name" label="出发区域" width="130">
          </el-table-column>
          <el-table-column prop="to_network_name" label="目的区域" width="130">
          </el-table-column> -->
          <el-table-column
            prop="customer_area_name"
            label="客户所属区域"
            width="200"
          >
          </el-table-column>
          <!-- <el-table-column prop="customer_name" label="客户名称" width="200">
          </el-table-column> -->
          <!-- <el-table-column prop="order_no" label="订单编号" width="120">
          </el-table-column> -->
          <el-table-column prop="number" label="件数" width="60" align="right">
          </el-table-column>
          <el-table-column prop="weight" label="重量" width="60" align="right">
          </el-table-column>
          <el-table-column prop="volume" label="体积" width="60" align="right">
          </el-table-column>
          <el-table-column
            prop="package_quantity"
            label="包装数量"
            width="100"
            align="right"
          >
          </el-table-column>
          <el-table-column prop="package_type" label="包装型号" width="120">
          </el-table-column>

          <el-table-column
            prop="freight"
            label="运单总运费"
            width="100"
            align="right"
          >
          </el-table-column>
          <el-table-column prop="w_account_status" label="对账状态" width="100">
          </el-table-column>
          <el-table-column
            prop="total_cost"
            label="总成本"
            width="80"
            align="right"
          >
          </el-table-column>
          <el-table-column
            prop="gross_profit"
            label="毛利润"
            width="100"
            align="right"
          >
          </el-table-column>
          <el-table-column
            prop="gross_profit_margin"
            label="毛利率"
            width="100"
            align="right"
          >
          </el-table-column>
          <el-table-column
            prop="collect_money"
            label="揽收总费用"
            width="100"
            align="right"
          >
          </el-table-column>
          <el-table-column
            prop="l_account_status"
            label="揽收对账状态"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="transport_money"
            label="运输总费用"
            width="100"
            align="right"
          >
          </el-table-column>
          <el-table-column
            prop="g_account_status"
            label="运输对账状态"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="distribution_money"
            label="配送总费用"
            width="100"
            align="right"
          >
          </el-table-column>
          <el-table-column
            prop="p_account_status"
            label="配送对账状态"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="receipt_money"
            label="回单总费用"
            width="100"
            align="right"
          >
          </el-table-column>
          <el-table-column
            prop="hd_account_status"
            label="回单对账状态"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="box_recycle_money"
            label="回箱总费用"
            width="100"
            align="right"
          >
          </el-table-column>
          <el-table-column
            prop="hx_account_status"
            label="回箱对账状态"
            width="100"
          >
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top: 10px; text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {
  customerBox,
  revenueCost, // 收入成本汇总
  revenueCostDetail, // 收入成本汇总导出
} from "@/api/Largewidthmeterlist";
export default {
  name: "incomesdetial",
  props: ["detailTime", "detailId"],
  data() {
    return {
      orderSearch: {
        customer_id: "",
        order_no: "",
        waybill_no: "",
        customer_name: "王刚",
        start_time: "1674199254",
        end_time: "1675408893",
        page: "1",
        page_size: "10",
      },
      datepicker: [],
      tableData: [],
      loadingtype: false,
      customerBoxData: [],
      currentPage4: 1,
      total: 0,
    };
  },
  mounted() {
    // 客户接口
    this.customerBoxFn();
    // console.log(this.detailId, "fjkalsjdflakjds");
    this.orderSearch.customer_id = this.detailId * 1;
    this.datepicker = this.detailTime;
    // 客户
    this.revenueCostObj();
    // this.lastMonthTimetamp()
  },
  methods: {
    // 查询
    onSubmit() {
      this.orderSearch.page = 1;
      this.revenueCostObj();
    },
    // 重置
    replacement() {
      this.orderSearch.customer_id = this.detailId * 1;
      this.orderSearch.order_no = "";
      this.orderSearch.waybill_no = "";
      this.datepicker = this.detailTime;
      this.orderSearch.page = 1;
      this.orderSearch.page_size = 10;
      this.revenueCostObj();
    },
    //获取所属客户
    customerBoxFn() {
      let data = {
        name: "", //名称
        is_send: "1", //是否为客户 0不  1是客户
        is_receive: "", //是否收货单位  0不是  1是
      };
      customerBox(data).then((res) => {
        if (res.code === 10000) {
          this.customerBoxData = res.data;
        }
      });
    },
    // 导出
    ExportClickPlayFn() {
      this.loadingtype = true;
      var param = {
        customer_id: this.orderSearch.customer_id + "",
        order_no: this.orderSearch.order_no + "",
        waybill_no: this.orderSearch.waybill_no + "",
        customer_name: "",
        start_time:
          this.datepicker.length > 0 ? this.datepicker[0] / 1000 + "" : "",
        end_time:
          this.datepicker.length > 0 ? this.datepicker[1] / 1000 + "" : "",
      };
      revenueCostDetail(param).then((res) => {
        if (res.code == 10000) {
          this.loadingtype = false;
          var loadedurl = "https://" + res.data.loaded_url;
          window.open(loadedurl);
        } else {
          this.loadingtype = true;
          this.$message.error("数据导出失败");
        }
      });
    },
    //获取列表接口
    revenueCostObj() {
      var param = {
        customer_id: this.orderSearch.customer_id + "",
        order_no: this.orderSearch.order_no + "",
        waybill_no: this.orderSearch.waybill_no + "",
        customer_name: "",
        start_time:
          this.datepicker.length > 0 ? this.datepicker[0] / 1000 + "" : "",
        end_time:
          this.datepicker.length > 0 ? this.datepicker[1] / 1000 + "" : "",
        page: this.orderSearch.page + "",
        page_size: this.orderSearch.page_size + "",
      };
      revenueCost(param).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.pagination.total * 1;
      });
    },
    changeCustomerDetailPage() {
      this.$parent.clientclose();
    },
    handleSizeChange(val) {
      this.orderSearch.page_size = val;
      this.revenueCostObj();
    },
    handleCurrentChange(val) {
      this.orderSearch.page = val;
      this.revenueCostObj();
    },
    handleJump(scope) {
      //跳转到对应运单详情
      // console.log(scope, "scopre");
      let text = this.$router.resolve({
        name: "waybillDetail",
        query: { id: scope.waybill_id, activeName: "1" },
      });
      window.open(text.href, "_blank");
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = {};
      columns.forEach((column) => {
        sums[column.property] = 0;
      });
      var Allfreight = 0; //总运费
      // 总毛利润
      var AllgrossProfit = 0; // 总毛利润

      data.forEach((item) => {
        columns.forEach((column, index) => {
          // console.log(item.number, "itemfasdf ");
          if (column.property in sums) {
            if (column.property === "number") {
              sums[column.property] += parseFloat(
                item.number != "" ? item.number : 0
              );
            } else if (column.property === "weight") {
              sums[column.property] += parseFloat(
                item.weight != "" ? item.weight : 0
              );
            } else if (column.property === "volume") {
              sums[column.property] += parseFloat(
                item.volume != "" ? item.volume : 0
              );
            } else if (column.property === "package_quantity") {
              sums[column.property] += parseFloat(
                item.package_quantity != "" ? item.package_quantity : 0
              );
            } else if (column.property === "freight") {
              sums[column.property] += parseFloat(item.freight);
            } else if (column.property === "total_cost") {
              sums[column.property] += parseFloat(item.total_cost);
            } else if (column.property === "gross_profit") {
              sums[column.property] += parseFloat(item.gross_profit);
            } else if (column.property === "gross_profit_margin") {
              Allfreight += parseFloat(item.freight);
              AllgrossProfit += parseFloat(item.gross_profit);
              sums[column.property] =
                (AllgrossProfit / Allfreight).toFixed(2) * 100 + "%";
            } else if (column.property === "collect_money") {
              sums[column.property] += parseFloat(
                item.collect_money != "" ? item.collect_money : 0
              );
            } else if (column.property === "transport_money") {
              sums[column.property] += parseFloat(
                item.transport_money != "" ? item.transport_money : 0
              );
            } else if (column.property === "distribution_money") {
              sums[column.property] += parseFloat(
                item.distribution_money != "" ? item.distribution_money : 0
              );
            } else if (column.property === "receipt_money") {
              sums[column.property] += parseFloat(
                item.receipt_money != "" ? item.receipt_money : 0
              );
            } else if (column.property === "box_recycle_money") {
              sums[column.property] += parseFloat(
                item.box_recycle_money != "" ? item.box_recycle_money : 0
              );
            } else {
              sums[column.property] = "";
            }
          }
        });
      });
      sums["waybill_no"] = "汇总";
      // 显示结果保留两位小数
      Object.keys(sums).forEach((key) => {
        if (typeof sums[key] === "number") {
          sums[key] = sums[key].toFixed(2);
        }
      });
      return Object.keys(sums).map((key) => {
        return sums[key];
      });
    },
  },
};
</script>
<style scoped lang="scss">
.incomesdetial {
  padding: 10px;
  margin-top: 5px;
  margin-left: 5px;
  background-color: #fff;

  .summaryheader {
    margin: 0 auto;

    .shareheader_top {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
</style>